﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>开始朗读</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/d_common.css">
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/index4.css">
</head>
<body class="bg2">
	<div id="back" >
	
	<div class="header">
		<div class="logo">
			<a href="javascript:void(0);"><img src="img/n_logo.png" alt="">
			</a>
		</div>
		<div class="user">
			<img src="${user.pic==null?'img/man.png':user.pic==''?'img/man.png':user.pic }" alt="">
			<div class="admin">
				<span class="name">${user.name }</span><br> <span class="number">${user.cardno }</span>
			</div>
		</div>
	</div><!--end header-->


	<!--视频文章音乐-->
	<div class="main4 clear">


		<!--视频以及文章的面板-->
		<div class="main_fl">
			<!--视频-->
			<div class="video fl">
				<div id="vd"></div>
			</div>
			<!--视频结束-->

			<div class="artical fr">
				<div id="frame" >  
				    <div id="photos" class="play">  
				        <c:forEach var="pic" items="${slist }">
				        	<img src="${pic.pic}" > 
						</c:forEach>
				    </div>  
				</div>  
				
				<div class="articalMain">
					<marquee id="marqueeContent" direction="up" scrollamount="2" onmouseover=this.stop() onmouseout=this.start()>
						<h3 style="color:#000;">${material.title }</h3>
						<p style="color:#000;">
							${material.content }
						</p>
						<h3 style="color:#000;">${material.title }</h3>
						<p style="color:#000;">
							${material.content }
						</p>
					</marquee>
				</div>
			</div>
			<div class="clear"></div>
			<div class="pageBtn">
				<div class="time fl">
					<span>倒计时:</span>
					<p><span id="minute">00</span>:<span id="second">00</span></p>
				</div>
				<label class="fl tiplabel">调整方向：</label>
				<a style="color:#000;" href="javaScript:;" onclick="changeSize('t1');" class="btn fl dir">上 </a>
				<a style="color:#000;" href="javaScript:;" onclick="changeSize('t2');" class="btn fl dir">下 </a>
				<a style="color:#000;" href="javaScript:;" onclick="changeSize('p2');" class="btn fl dir">左 </a>
				<a style="color:#000;" href="javaScript:;" onclick="changeSize('p1');" class="btn fl dir">右 </a>
				<a style="color:#000;" href="javascript:;" onclick="changeSpeed(1);" class="nBtn btn fr">+</a>
				<a style="color:#000;" href="javascript:;" onclick="changeSpeed(-1);" class="pBtn btn fr">-</a> 
				<div class="clear"></div>
			</div>
			<div class="pageBtn">
				<a style="color:#000;" href="javascript:changeSize('z1');" class="vBtn btn fl addbtn">+</a>
				<a style="color:#000;" href="javascript:changeSize('z2');" class="vBtn btn fl">-</a>
				<a style="color:#000;" href="javascript:changeVideo();" class="vBtn btn fl">视角</a>
				<a style="color:#000;" href="declaimer/material?cardno=${user.cardno }&guid=${user.guid}&code=${material.materialtype }&devicecode=${devicecode}" class="sBtn btn fr">重选素材</a>
				<div class="clear"></div>
			</div>
		</div><!--视频以及文章的面板-->
		
		<!--背景音乐设置的面板-->
		<div class="main_fr">
			<div class="music fl">
				<div id="player">
					<span>选择背景音乐：</span>
					<div class="ctrl">
						<div class="control">
							<div class="left">
								<div class="rewind icon"></div>
								<div class="playback icon"></div>
								<div class="fastforward icon"></div>
							</div>
							<div class="volume right">
								<div class="mute icon left"></div>
								<div class="slider left">
									<div class="pace"></div>
								</div>
							</div>
						</div>
						<div class="progress">
							<div class="slider">
								<div class="loaded"></div>
								<div class="pace"></div>
							</div>
							<div class="left" style="margin-top: 8px;"><span class="timer">0:00</span>
								<span class="alltime" style="float:right;font-size: 16px;color: #ccc;">0:00</span></div>
							<div class="right">
								<div class="repeat icon"></div>
								<div class="shuffle icon"></div>
							</div>
						</div>
					</div>
				</div>
				<ul id="playlist"class="fl" ></ul>
			</div>

			<div class="btn">
				<div style="color:#000;" class="startBtn">开始</div>
				<div style="color:#000;" class="stopBtn">结束</div>
			</div>
		</div><!--背景音乐设置的面板-->
	</div>
	
		
	</div><!--end back-->
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/jwplayer.js"></script>
	<script src="layui/layui.js"></script>
	<script>
	var localip = '${localip}';
	var i = 600;
	document.all.marqueeContent.stop();
	Timeout();
	function Timeout(){
		if(i>0){
			i--;
			setTimeout(function(){Timeout();},1000);
		}else{
			setEncoderState(5);
		}
	}
	
	
	
	
		var list = "["+"${list}"+"]";//.split(";")
		var plist = eval(list);
		
		//打开自动播放
		var height = $('.articalMain').height();
		var p = 0;
		$('.nBtn').click(function() {
			if(height>400*(p+1)){
				p++;
				$('.articalMain').css('top', (-390*p)+'px');
			}
		});
		$('.pBtn').click(function() {
			if(p>0){
				p--;
				$('.articalMain').css('top', (-390*p)+'px');
			}
		});
		
		layui.use(['layer', 'form', 'element'], function(){
	        var layer = layui.layer
	                ,form = layui.form()
	                ,element = layui.element()

	        //你的代码都应该写在这里面
	        var layer = layui.layer;
	        var form = layui.form();

	        $('#direction').click(function () {

	            layer.open({
	                type: 1,
	                title: 0,
	                closeBtn: 0,
	                skin: 'layui-layer-demo', //样式类名
	                shadeClose: true,//开启遮罩关闭
	                skin: 'yourclass',
	                area: ['240px', '200px'], //宽高
	                content: '<ul class="ul"><li class="li1" onclick="changeSize(\'p2\');"></li><li class="li2" onclick="changeSize(\'p1\');"></li><li class="li3" onclick="changeSize(\'t1\');"></li><li class="li4" onclick="changeSize(\'t2\');"></li></ul>'
	            });

	        });

	        $(document).on('click', '.openUl li', function() {
	            $('.selctNum').html( $(this).html());
	        });

	    });
		
		var isread = false;
		$('.startBtn').click(function() {
			if('${user.cardno}'==undefined ||'${user.cardno}'==''){
				layer.msg("超时退出，请重新刷卡登录！",{icon:0,time:3000},function(){
					window.location.href="<%=basePath%>declaimer/first?devicecode=${devicecode}&guid=${user.guid}";
				});
				return;
			}
			if(isread){
				return;
			}
			$.ajax({
				async : false,
				cache : false,
				type : 'post',
				dataType : "json",
				url :  'declaimer/readtype?cardno=${user.cardno}&guid=${user.guid}&materialid=${material.id }&devicecode=${devicecode }',// 请求的action路径
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					layer.msg("请求失败！");
				},
				success : function(data) {
					if(data.state=="1"){
						setEncoderState(1);
						seconds = data.message;
						setLastTime();
						layer.msg("朗读开始！",{icon:1});
						document.all.marqueeContent.start();
						$(".sBtn").hide();
						isread = true;
						i = 1000;
					}else{
						layer.msg(data.message,{icon:0});
					}
				}
			});	
		});
		var seconds = 0;
		function setLastTime(){
			var second = seconds%60;
			var minute = (seconds-second)/60;
			if(minute<10)
				$("#minute").html("0"+minute);
			else
				$("#minute").html(minute);
			if(second<10)
				$("#second").html("0"+second);
			else
				$("#second").html(second);
			if(seconds>0){
				seconds--;
				setTimeout(function() { 
					setLastTime();
				},1000);
			}else{
				setEncoderState(5);
			}
		}
		$(".stopBtn").click(function(){
			if(isread){
				setEncoderState(5);
			}else{
				layer.confirm('是否退出朗读？', {
					  btn: ['确定','取消'] //按钮
				}, function(){
					setEncoderState(5);
				}, function(){
				});
			}
		});
		//保存当前播放器以便操作 
		var thePlayer = jwplayer('vd').setup({  
	        'flashplayer': 'jwplayer.flash.swf',  
	        'file': 'rtmp://'+localip+'/live/main',  
	        //'file': '/upload/vedio/xsd/SM1/2.flv',  
	        'controlbar': 'bottom',  
	        'width': '700',  
	        'height': '400',
	        'controls':false,//显示控件按钮
	        'autostart':'false'//自动播放
	      });
		var showlive = '${showlive}';
		setLive();
		function setLive(){
			setEncoderState(2);
		}
		if(showlive=='1'){
		}else{
			$(".video").hide();
			$(".artical").css("width","95%");
		}
		//处理录播设备返回数据
		function jsoncallback(data){
			if(data=='OK'){
				if(showlive=='1'){
					thePlayer.play(true);
				}
			}else if(data=='1'){
				
			}else{
				layer.msg("设备维护中，请下次再来1！", {icon: 0});
			}
		}
		//切换摄像头特写或全景
		var Layoutname = "L";
		function changeVideo(){
			if(Layoutname=="L"){
				Layoutname = "R";
			}else{
				Layoutname = "L";
			}
			$.ajax({
				type: "get",
		        dataType: 'jsonp',
		        jsonp:"jsoncallback",
				url :  'http://'+localip+'/classes/common/Reading.php?method=setLayout&name='+Layoutname,// 请求的action路径
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					if(XMLHttpRequest.status!=200){
						layer.msg("设备维护中，请下次再来2！", {icon: 0});
					}
				},
				success : function (data) {
					
				}
			});	
		}
		//设置录播状态 1-录播，2-直播，3-录制，4-暂停，5-结束
		function setEncoderState(state){
			$.ajax({
				type: "get",
		        dataType: 'jsonp',
		        jsonp:"jsoncallback",
		        timeout:30000,
				url :  'http://'+localip+'/classes/common/Reading.php?method=setEncoderState&channelId=1&state='+state,// 请求的action路径
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					if(XMLHttpRequest.status!=200){
						layer.msg("设备维护中，请下次再来3！", {icon: 0});
					}
				},
				success : function (data) {
				}
			});
			if(state==5){
				window.location.href='<%=basePath%>declaimer/endread?guid=${user.guid}&devicecode=${devicecode }';
			}
		}
		//设置摄像头角度和焦距
		
		function changeSize(v){
			p=0,t=0,z=0,pid=3;
			if(!isread){
				i = 120;
			}
			if(v=='p1'){
				p = 10;
			}else if(v=='p2'){
				p = -10;
			}else if(v=='t1'){
				t = 10;
			}else if(v=='t2'){
				t = -10;
			}else if(v=='z1'){
				z = 2;
			}else if(v=='z2'){
				z = -2;
			}
			$.ajax({
				type: "get",
		        dataType: 'jsonp',
		        jsonp:"jsoncallback",
				url :  'http://'+localip+'/classes/common/Reading.php?method=ptzRlt&id='+pid+'&p='+p+'&t='+t+'&z='+z,// 请求的action路径
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					if(XMLHttpRequest.status!=200){
						layer.msg("设备维护中，请下次再来4！", {icon: 0});
					}
				},
				success : function (data) {
					
				}
			});
		}
		//设置字幕速度
		var speed = $("marquee").attr("scrollamount")
		function changeSpeed(val) {
			var marquee = $('marquee').html()
			setTimeout(
					function() {
						if (val > 0) {
							speed++;
							if (speed > 6) {
								speed = 6;
							}
							$("marquee").attr("scrollamount", speed).html(
									marquee);
							//回流DOM 重新添加marquee内容
							/* $(".articalMain")
									.html(
											'<marquee scrollamount="'
													+ speed
													+ '" id="marqueeContent" direction="up"onmouseover=this.stop() onmouseout=this.start()>'
													+ marquee + '</marquee>') */
						} else {
							speed--;
							if (speed < 0) {
								speed = 1;
							}
							$("marquee").attr("scrollamount", speed)
							/* $(".articalMain")
									.html(
											'<marquee scrollamount="'
											+ speed
											+ '" id="marqueeContent" direction="up"onmouseover=this.stop() onmouseout=this.start()>'
													+ marquee + '</marquee>') */
						}
					}, 200);
		}
	</script>
	<script src="js/script.js"></script>
</body>
</html>